<template>
	<view class="content container">
<!-- 		<uni-nav-bar  background-color="#ffffff"  color="#000000" :border="false"  status-bar left-icon="left" left-text=""
			title="站内消息" height="200rpx" @clickLeft="clickLeftFn"   /> -->

		
		<div class="headerbox">
			<view class="header">
				<image @click="back" src="/static/image/login/left.png" mode=""></image>
				<text>站内消息</text>
			</view>
			<div class="wrapper">
				<view class="nav">
					<!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
					<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
						<view class="tab-scroll_box">
							<!-- 选项卡类别列表 -->
							<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"  :class="{'active2':isActive==index}" @click="chenked(index)">
									{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>
			</div>
		</div>
		
		
		
		<!-- 选项卡内容轮播滑动显示，current为当前第几个swiper子项 -->
		<swiper @change="change" :current="isActive" class="swiper-content" :style="fullHeight">
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="messageitem" v-for="(item,index) in messageList" >
						<image class="avator" :src="item.src" mode=""></image>
						<view class="area">
							<view class="middle">
								<text class="title">{{item.title}}</text>
								<text class="contenttxt">{{item.content}}</text>
							</view>
							<view class="right">
								<text class="time">{{item.time}}</text>
								<div class="tag" v-if="item.count" >
									<text >{{item.count}}</text>
								</div>
								
							</view>
						</view>
					</view>
				</scroll-view>	
			</swiper-item>
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="messageitem" v-for="(item,index) in noticeList" >
						<image class="avator" :src="item.src" mode=""></image>
						<view class="area">
							<view class="middle">
								<text class="title">{{item.title}}</text>
								<text class="contenttxt">{{item.content}}</text>
							</view>
							<view class="right">
								<text class="time">{{item.time}}</text>
								<!-- <text v-if="item.count" class="tag">{{item.count}}</text> -->
							</view>
						</view>
					</view>
				</scroll-view>	
			</swiper-item>
<!-- 			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item" >
						选项卡3页面
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item" >
						选项卡4页面
					</view>
				</scroll-view>	
			</swiper-item>
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item" >
						选项卡5页面
				    </view>
				</scroll-view>	
			</swiper-item>
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item" >
						选项卡6页面
				    </view>
				</scroll-view>	
			</swiper-item> -->
		</swiper>
		<view class="" style="height: 190rpx;">
			
		</view>
		<tabbar selected="0"></tabbar>
	</view>
</template>
<script>
	import tabbar from "../../components/tabbar/tabbar.vue";
	import avator from '../../static/image/home/avator.png'
	import message from '../../static/image/home/message.png'
	import notice from '../../static/image/home/notice.png'
	export default {
		components: {
			tabbar: tabbar
		},
		watch:{
			// swiper与上面选项卡联动
			currentindex(newval){
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
		},
		data() {	
			return {
				avator: avator,
				message: message,
				notice: notice,
				isActive: 0,
				index: 0,
				currentindex:0,
				category:[
					{
						id:1,
						name:'消息',
					},
					{
						id:2,
						name:'通知',
					},
					// {
					// 	id:3,
					// 	name:'选项卡三',
					// },
					// {
					// 	id:4,
					// 	name:'选项卡四',
					// },
					// {
					// 	id:5,
					// 	name:'选项卡五',
					// },
					// {
					// 	id:6,
					// 	name:'选项卡六',
					// },
				],
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				fullHeight:"",	
				
				messageList: [
					{
					src: avator,
					title: '胡思乱想的小李',
					content: '[分享]北京-上海5日行程',
					time: '5分钟前',
					count: 2
					},
					{
					src: avator,
					title: '原伟',
					content: '平凡人做非凡事',
					time: '15分钟前'
					},
					{
					src: avator,
					title: '麦凤',
					content: '士兵要的不是望远镜，而是地图',
					time: '2小时前',
					count: 2
					},
					{
					src: avator,
					title: '种莎',
					content: '错误的决定比没有决定要好',
					time: '10:56',
					count: 2
					},
					{
					src: avator,
					title: '尤泰春',
					content: '心有多大，舞台就有多大',
					time: '10:13'
					},
					{
					src: avator,
					title: '岩瑶妹',
					content: '团队的成长是管理者最大的成功',
					time: '08:50'
					},
					{
					src: avator,
					title: '岩瑶妹',
					content: '团队的成长是管理者最大的成功',
					time: '08:50'
					},
					{
					src: avator,
					title: '岩瑶妹',
					content: '团队的成长是管理者最大的成功',
					time: '08:50'
					},
				],
				noticeList: [
					{
					type: 1,
					src: message,
					title: '通知消息',
					content: '不要在你家里放一件你不知其用，或你认为不美的东西',
					time: '2025-03-08 10:56'
					},
					{
					type: 1,
					src: message,
					title: '通知消息',
					content: '没有愚蠢的问题，只有愚蠢的回答',
					time: '2025-02-24 11:13'
					},
					{
					type: 1,
					src: message,
					title: '通知消息',
					content: '最好的领导是做心灵的导航仪，而不是做赶车人',
					time: '2025-02-24 11:03'
					},
					{
					type: 1,
					src: message,
					title: '通知消息',
					content: '没有过程的结果是垃圾，没有结果的过程是放屁',
					time: '2025-01-17 08:50'
					},
					{
					type: 2,
					src: notice,
					title: '公告',
					content: '不要让自己的队友失败',
					time: '2025-01-01 10:13'
					},
				]
			}
		},
		mounted() {
			var that = this;
			 //获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
			uni.getSystemInfo({
			      success: function (res) {
				         that.fullHeight ="height:" + res.windowHeight + "px";
				  }
				});
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			clickLeftFn() {
				uni.navigateBack()
			},
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					  // 拿到 scroll-view 组件宽度
					  this.contentScrollW = data.width
				 }).exec();
				 query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					 let dataLen = data.length;
					  for (let i = 0; i < dataLen; i++) {
						  //  scroll-view 子元素组件距离左边栏的距离
						  this.category[i].left = data[i].left;
						 //  scroll-view 子元素组件宽度
						 this.category[i].width = data[i].width
					}
				 }).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
			// swiper滑动时，获取其索引，也就是第几个
			change(e){
				const {current} = e.detail;
				this.currentindex = current;
			},	
		}
	}
</script>
<style lang="scss">
	page{
		height: 100%;
		display: flex;
		background-color: #FFFFFF;
	}
	.content{
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;
		.wrapper {

		}
		.nav{
			position: fixed;
			width: 100%;
			// border-top: 1rpx solid #f2f2f2;
			background-color: #fff;	
			width: 100%;
			top: 170rpx;
			// margin-top: 200rpx;
			z-index: 9;
			
			// position: fixed;
			
			align-items: center;
			height: 110rpx;
			.tab-scroll{
				flex: 1;
				overflow: hidden;
				box-sizing: border-box;
				padding-left: 30rpx;
				padding-right: 30rpx;
				.tab-scroll_box{
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;
					.tab-scroll_item{
						line-height: 40rpx;
						margin-right: 80rpx;
						flex-shrink: 0;
						padding-bottom:10px;
						display: flex;
						justify-content: center;
						color: #121212;
						font-size: 30rpx;
						padding-top: 10px;
					}
				}
			}
		}
		.swiper-content{
			   padding-top: 100rpx;
			   flex: 1;
			.swiperitem-content{
			    background-color: #ffffff;
				.nav_item{	
					background-color: #FFFFFF;
					padding:20rpx 40rpx 0rpx 40rpx ;
				}
				.messageitem {
					display: flex;
					align-items: center;
					min-height: 152rpx;
					position: relative;
					.avator {
						width: 92rpx;
						height: 92rpx;
						// border-radius: 50%;
						margin: 30rpx 24rpx 30rpx 30rpx;
					}
					.area {
						padding: 30rpx;
						flex: 1;
						display: flex;
						justify-content: space-between;
						border-bottom: 2rpx solid #F3F5F7;
						.middle {
							display: flex;
							flex-direction: column;
							// align-items: center;
							justify-content: center;
							.title {
								color: #1A1A1A;
								font-size: 32rpx;
								line-height: 44rpx;
								margin-bottom: 10rpx;
								// width:400rpx;
								  white-space:nowarp;/*强制在一行显示*/
								  over-flow:hidden;/*溢出隐藏*/
								  text-overflow:ellipsip;/*溢出显示省略号*/
								  max-width: 50vw;
							}
							.contenttxt {
								// max-lines: 1;
								// lines: 1;
								color: #999999;
								font-size: 24rpx;
								line-height: 34rpx;
								// width:400rpx;
								overflow: hidden;
								 white-space: nowrap;
								 text-overflow: ellipsis;
								 max-width: 60vw;
							}
						}
						.right {
							margin-left: 10rpx;
							display: flex;
							flex-direction: column;
							// align-items: center;
							// justify-content: flex-end;
							align-items: flex-end;
							position: absolute;
							top: 26rpx;
							right: 30rpx;
							// justify-content: space-between;
							.time {
								color: #999999;
								font-size: 24rpx;
								line-height: 34rpx;
							}
							.tag {
								// display: inline-block;
								// box-sizing: border-box;
								margin-top: 16rpx;
								
								border-radius: 50%;
								text-align: center;
								display: flex;
								justify-content: center;
								align-items: center;
								// box-sizing: content-box;
								
								text {
									// box-sizing: border-box;
									border-radius: 50%;
									min-width: 32rpx;
									min-height: 32rpx;
									// height: 32rpx;
									background: #F44336;
									color: #FFFFFF;
									font-size: 22rpx;
									line-height: 32rpx;
									padding: 5rpx;
								}
							}
						}
					}

				}
				.noticeitem {
					
				}
			}
		}	
	}
	.active2 {
		position: relative;
		// color: #ff0000;
		font-weight: bold;
		font-weight: 600;
		z-index: 999;
		
	}
	.active2::after {
		content: "";
		position: absolute;
		width: 60rpx;
		height: 12rpx;
		// background-color: #ff0000;
		background: linear-gradient( 270deg, #FFFFFF 0%, #017DFF 100%);
		left: 0px;
		right: 0px;
		bottom: 14rpx;
		margin: auto;
	}
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	::v-deep.uni-scroll-view::-webkit-scrollbar {
		display: none
	}
	
	
	
	.headerbox {
		position: fixed;
		width: 100%;
		z-index: 1;
		height: 276rpx;
		.header {
			width: 100%;
			height: 176rpx;
			background-color: #fff;
			// padding-top: 108rpx;
			display: flex;
			justify-content: center;
			position: relative;
			// align-items: center;
			
			image {
				position: absolute;
				left: 32rpx;
				bottom: 24rpx;
				width: 34rpx;
				height: 34rpx;
			}
			text {
				position: absolute;
				bottom: 16rpx;
				font-weight: 600;
				font-size: 34rpx;
				color: #221715;
				line-height: 51rpx;
			}
		}
	}

</style>
 